<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames">
            <el-collapse-item name="info">
                <template #title>
                    <el-link type="primary">题目基本信息</el-link><el-icon class="header-icon">
                        <info-filled />
                    </el-icon>
                </template>
                <el-form>
                    <el-form-item label="题目">
                        <el-input type="textarea" v-model="props.question.question" disabled />
                    </el-form-item>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="选项A">
                                <el-input v-model="props.question.optionA" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4"></el-col>
                        <el-col :span="10">
                            <el-form-item label="选项B">
                                <el-input v-model="props.question.optionB" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="类型">
                                <el-input v-model="props.question.typeName" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4"></el-col>
                        <el-col :span="10">
                            <el-form-item label="答案">
                                <el-input v-model="props.question.answerOption" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="附件列表">
                            <el-upload v-model:file-list="fileList" class="upload-demo" action="/knowledge/upload"
                                :data="data" multiple :on-preview="handlePreview" :on-remove="handleRemove"
                                :on-success="handleSuccess">
                                <el-button type="primary">点击上传附件</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-collapse-item>
            <el-collapse-item name="node">
                <template #title>
                    <el-link type="primary">我的笔记</el-link><el-icon class="header-icon">
                        <info-filled />
                    </el-icon>
                </template>
                <el-table style="width:100%" :data="tableData" stripe>
                    <el-table-column type="index" label="序号" :index="index" width="80" />
                    <el-table-column prop="note" label="笔记" width="480" />
                    <el-table-column prop="creationDate" label="创建时间" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="danger" @click="handleDeleteNote(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
                <br />
                <el-form ref="noteFormRef" :model="noteForm" :rules="rules">
                    <el-form-item label="笔记" prop="note">
                        <el-input type="textarea" v-model="noteForm.note" placeholder="请记录相关内容" />
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="handleAddNote">新增</el-button>
            </el-collapse-item>
        </el-collapse>
    </div>


</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios';
const activeNames = ref(["info", "node"])
const props = defineProps(["question"])
const noteFormRef = ref();
const noteForm = ref({})

const pageSizes = ref([5, 10, 20, 50])
const pageSize = ref(pageSizes.value[0]);
const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const fileList = ref([])

const rules = reactive({
    note: [
        { required: true, message: '请输入笔记', trigger: 'blur' }
    ]
})

const index = (index) => {
    return index + 1 + pageSize.value * (currentPage.value - 1);
}

onMounted(() => {
    getList(currentPage.value, pageSize.value)
    getFileList()
})

const getFileList = async () => {
    var res = await axios.get(`/knowledge/file//list/${props.question.id}`)
    if (res.data.code === 200) {
        fileList.value = res.data.data;
    }
}

const getList = async (currentPage, pageSize) => {
    var res = await axios.get(`/knowledge/note/list/${props.question.id}?page=${currentPage}&size=${pageSize}`)
    if (res.data.code === 200) {
        tableData.value = res.data.data.records
        total.value = res.data.data.total
    } else {
        ElMessage.error(res.data.msg)
    }
}

const handleAddNote = () => {
    noteFormRef.value.validate(async (valid) => {
        if (valid) {
            var res = await axios.post(`/knowledge/note/add`, {
                questionId: props.question.id,
                note: noteForm.value.note
            })
            if (res.data.code === 200) {
                ElMessage.success("操作成功");
                getList(currentPage.value, pageSize.value)
                noteForm.value.note = ''
            } else {
                ElMessage.error(res.data.msg);
            }
        } else {
            console.log(valid)
        }
    })


}

const handleSizeChange = () => {
    currentPage.value = 1;
    getList(currentPage.value, pageSize.value)
}

const handleCurrentChange = () => {
    getList(currentPage.value, pageSize.value)
}

const handleDeleteNote = async (item) => {
    var res = await axios.delete(`/knowledge/note/${item.id}`)
    if (res.data.code === 200) {
        ElMessage.success("操作成功");
        getList(currentPage.value, pageSize.value)
    } else {
        ElMessage.error(res.data.msg);
    }
}

const data = {
    "token": localStorage.getItem("token"),
    "questionId": props.question.id
}

// 文件列表移除文件时的钩子
const handleRemove = async (uploadFile, uploadFiles) => {
    let fileId = uploadFile.id ? uploadFile.id : uploadFile.response.data.id
    if (fileId) {
        var res = await axios.delete(`/knowledge/file/delete/${fileId}`)
        if (res.data.code === 200) {
            ElMessage.success("删除成功")
        } else {
            ElMessage.error(res.data.msg)
        }
    }
}

const handleSuccess = async (resp, uploadFile, uploadFiles) => {

}

// 点击文件列表中已上传的文件时的钩子
const handlePreview = async (uploadFile) => {
    var res = await axios.get(`/knowledge/file/download?downloadUrl=${uploadFile.downloadUrl}&name=${uploadFile.name}`, {
        responseType: 'blob'
    })
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', uploadFile.name);
    document.body.appendChild(link);
    link.click();
}

</script>